<template>
  <el-dialog
    v-el-drag-dialog
    :title="'退单'"
    :visible.sync="visible"
    width="700px"
    @closed="reset"
  >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="客户名称">
        <el-input v-model="formInline.userName" placeholder="客户名称" disabled />
      </el-form-item>
      <el-form-item label="客户电话">
        <el-input v-model="formInline.userPhone" placeholder="客户电话" disabled />
      </el-form-item>

    </el-form>
    <div style="display: flex;">
      <p>退单理由：</p>
      <el-checkbox-group v-model="formInline.checkList">
        退单理由：
        <el-checkbox label="送气工送达不准时" />
        <!-- <el-checkbox label="太多了" /> -->
        <el-checkbox label="投诉一点点" />
      <!-- <el-checkbox label="不想要" /> -->

      </el-checkbox-group>
    </div>
    <div style="padding: 40px 0 40px 60px;">
      <el-input v-model="formInline.remark" type="textarea" :rows="3" maxlength="255" show-word-limit />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="success">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { } from '@/api'

  export default {
    name: 'urge',
    data() {
      return {
        visible: false,
        temp: {

        },
        formInline: {
          checkList: []
        }
      }
    },
    methods: {
      open(temp) {
        console.log(temp)
        this.formInline.userName = temp.contact
        this.formInline.userPhone = temp.contactPhone
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            this.type = 'edit'
          }
        })
      },
      success() {
        this.visible = false
      },
      async add() {
        // await roleAdd(this.temp)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '新增成功',
          type: 'success',
          duration: 2000
        })
      },
      async edit() {
        // await roleUpdate(this.temp)
        this.resolve(this.temp)
        this.visible = false
        this.$notify({
          title: '提示',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {

      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 48%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}

</style>
